<template>
  <div class="sidebar">
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant.sync="mini"
      permanent
      class="blue lighten-2"
    >
      <v-list-item class="px-2">
        <v-list-item-avatar>
          <img  src="../assets/user.png">
          <!-- <v-icon large color="white">mdi-account-circle</v-icon> -->
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title
            class="text-h6"
            style="color: white; text-align: center"
          >
            {{ studentName }}
          </v-list-item-title>
        </v-list-item-content>
        <v-btn icon @click.stop="mini = !mini" color="white">
          <img style="margin-left:10px;height:30px"  src="../assets/off.png">
        </v-btn>
      </v-list-item>

      <v-divider color="white"></v-divider>

      <v-list>
        <v-list-item link @click="toChange">
          <v-list-item-icon>
            <img style="height:28px"  src="../assets/change.png">
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title style="color: white">{{
              changePassword
            }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <v-list-item link @click="onSwitch">
          <v-list-item-icon>
            <img style="height:28px"  src="../assets/translate.png">
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title style="color: white">{{
              languageSwitch
            }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item link @click="logOut">
          <v-list-item-icon>
            <img style="height:28px"  src="../assets/logout.png">
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title style="color: white">{{
              logout
            }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>
<script>
import vueI18n from "../plugins/vue-i18n";
export default {
  name: "Sidebar",
  data() {
    return {
      drawer: true,
      mini: false,
      studentName: null,
    };
  },
  mounted() {
    this.studentName = JSON.parse(localStorage.getItem("userinfo")).name;
  },
  methods: {
    logOut() {
      this.$router.push("/login");
      localStorage.clear();
    },
    onSwitch() {
      if (vueI18n.locale == "zh") {
        vueI18n.locale = "en";
      } else {
        vueI18n.locale = "zh";
      }
    },
    toChange() {
      this.$router.push("/main/change");
    },
  },
  computed: {
    changePassword() {
      return vueI18n.t("lang.changePassword");
    },
    languageSwitch() {
      return vueI18n.t("lang.languageSwitch");
    },
    logout() {
      return vueI18n.t("lang.logOut");
    },
  },
};
</script>
<style scoped>
</style>